<div class="row">
    <div class="col-md-6">
        <!-- BEGIN LABELS AND BADGES PORTLET-->
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption">
                    <i class="icon-share font-red-sunglo"></i>
                    <span class="caption-subject font-red-sunglo bold uppercase">Labels & Badges</span>
                </div>
                <div class="actions">
                    <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                        <i class="icon-cloud-upload"></i>
                    </a>
                    <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                        <i class="icon-wrench"></i>
                    </a>
                    <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                        <i class="icon-trash"></i>
                    </a>
                </div>
            </div>
            <div class="portlet-body">
                <h4 class="block">Labels & Badges Styles</h4>
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th> Class </th>
                            <th> Labels </th>
                            <th> Badges </th>
                            <th> Roundless Badges </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td> Default </td>
                            <td>
                                <span class="label label-default"> Default </span>
                            </td>
                            <td>
                                <span class="badge badge-default"> 5 </span>
                            </td>
                            <td>
                                <span class="badge badge-default badge-roundless"> 3 </span>
                            </td>
                        </tr>
                        <tr>
                            <td> Primary </td>
                            <td>
                                <span class="label label-primary"> Primary </span>
                            </td>
                            <td>
                                <span class="badge badge-primary"> 4 </span>
                            </td>
                            <td>
                                <span class="badge badge-primary badge-roundless"> Hot </span>
                            </td>
                        </tr>
                        <tr>
                            <td> Info </td>
                            <td>
                                <span class="label label-info"> Info </span>
                            </td>
                            <td>
                                <span class="badge badge-info"> 6 </span>
                            </td>
                            <td>
                                <span class="badge badge-info badge-roundless"> New </span>
                            </td>
                        </tr>
                        <tr>
                            <td> Success </td>
                            <td>
                                <span class="label label-success"> Success </span>
                            </td>
                            <td>
                                <span class="badge badge-success"> 1 </span>
                            </td>
                            <td>
                                <span class="badge badge-success badge-roundless"> 2 </span>
                            </td>
                        </tr>
                        <tr>
                            <td> Danger </td>
                            <td>
                                <span class="label label-danger"> Danger </span>
                            </td>
                            <td>
                                <span class="badge badge-danger"> 3 </span>
                            </td>
                            <td>
                                <span class="badge badge-danger badge-roundless"> 5 </span>
                            </td>
                        </tr>
                        <tr>
                            <td> Warning </td>
                            <td>
                                <span class="label label-warning"> Warning </span>
                            </td>
                            <td>
                                <span class="badge badge-warning"> 12 </span>
                            </td>
                            <td>
                                <span class="badge badge-warning badge-roundless"> 3 </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h4 class="block">Labels In Headings</h4>
                <div class="well">
                    <h1>Example heading
                        <span class="label label-default"> default </span>
                    </h1>
                    <h2>Example heading
                        <span class="label label-success"> success </span>
                    </h2>
                    <h3>Example heading
                        <span class="label label-danger"> danger </span>
                    </h3>
                    <h4 class="block">Example heading
                        <span class="label label-info"> info </span>
                    </h4>
                    <h4>Example heading
                        <span class="label label-warning"> warning </span>
                    </h4>
                    <h6>Example heading
                        <span class="label label-primary"> primary </span>
                    </h6>
                </div>
                <div class="clearfix">
                    <h4 class="block">Badges in Navs</h4>
                    <ul class="nav nav-pills">
                        <li class="active">
                            <a href="javascript:;"> Home
                                <span class="badge1"> 42 </span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;"> Profile </a>
                        </li>
                        <li>
                            <a href="javascript:;"> Messages
                                <span class="badge badge-danger"> 3 </span>
                            </a>
                        </li>
                    </ul>
                    <div class="clearfix margin-bottom-10"> </div>
                    <ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
                        <li class="active">
                            <a href="javascript:;">
                                <span class="badge badge-warning pull-right"> 42 </span> Home </a>
                        </li>
                        <li>
                            <a href="javascript:;"> Profile </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <span class="badge badge-success pull-right"> 3 </span> Messages </a>
                        </li>
                    </ul>
                </div>
                <div class="clearfix">
                    <h4 class="block">Badges in Inline Dropdowns</h4>
                    <div class="dropdown inline clearfix">
                        <!-- Link or button to toggle dropdown -->
                        <ul class="dropdown-menu" role="menu">
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="javascript:;"> Action
                                    <span class="badge badge-success"> 2 </span>
                                </a>
                            </li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="javascript:;"> Another action
                                    <span class="badge badge-warning"> 5 </span>
                                </a>
                            </li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="javascript:;"> Something here
                                    <span class="badge badge-danger"> 7 </span>
                                </a>
                            </li>
                            <li role="presentation" class="divider"> </li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="javascript:;"> Separated link
                                    <span class="badge badge-info"> 12 </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="clearfix"> </div>
                    <h4 class="block">Badges in Button Dropdowns</h4>
                    <div class="btn-group ">
                        <button class="btn blue dropdown-toggle" data-toggle="dropdown">Open Me!
                            <i class="fa fa-angle-down"></i>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="javascript:;"> Action
                                    <span class="badge badge-success"> 2 </span>
                                </a>
                            </li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="javascript:;"> Another action
                                    <span class="badge badge-warning"> 5 </span>
                                </a>
                            </li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="javascript:;"> Something here
                                    <span class="badge badge-danger"> 7 </span>
                                </a>
                            </li>
                            <li role="presentation" class="divider"> </li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="javascript:;"> Separated link
                                    <span class="badge badge-info"> 12 </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- END LABELS AND BADGES PORTLET-->
    </div>
    <div class="col-md-6">
        <!-- BEGIN PAGINATION PORTLET-->
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption">
                    <i class="icon-share font-red-sunglo"></i>
                    <span class="caption-subject font-red-sunglo bold uppercase">Pagination</span>
                </div>
                <div class="actions">
                    <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                        <i class="icon-cloud-upload"></i>
                    </a>
                    <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                        <i class="icon-wrench"></i>
                    </a>
                    <a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                        <i class="icon-trash"></i>
                    </a>
                </div>
            </div>
            <div class="portlet-body">
                <div>
                    <ul class="pagination pagination-lg">
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-left"></i>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;"> 1 </a>
                        </li>
                        <li>
                            <a href="javascript:;"> 2 </a>
                        </li>
                        <li class="active">
                            <a href="javascript:;"> 3 </a>
                        </li>
                        <li>
                            <a href="javascript:;"> 4 </a>
                        </li>
                        <li>
                            <a href="javascript:;"> 5 </a>
                        </li>
                        <li>
                            <a href="javascript:;"> 6 </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                    </ul>
                </div>
                <div>
                    <ul class="pagination">
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-left"></i>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;"> 1 </a>
                        </li>
                        <li>
                            <a href="javascript:;"> 2 </a>
                        </li>
                        <li class="active">
                            <a href="javascript:;"> 3 </a>
                        </li>
                        <li>
                            <a href="javascript:;"> 4 </a>
                        </li>
                        <li>
                            <a href="javascript:;"> 5 </a>
                        </li>
                        <li>
                            <a href="javascript:;"> 6 </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                    </ul>
                </div>
                <div>
                    <ul class="pagination pagination-sm">
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-left"></i>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;"> 1 </a>
                        </li>
                        <li class="active">
                            <a href="javascript:;"> 2 </a>
                        </li>
                        <li>
                            <a href="javascript:;"> 3 </a>
                        </li>
                        <li>
                            <a href="javascript:;"> 4 </a>
                        </li>
                        <li>
                            <a href="javascript:;"> 5 </a>
                        </li>
                        <li>
                            <a href="javascript:;"> 6 </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- END PAGINATION PORTLET-->
    </div>
</div>